<template>
  <div>
    <Carousel
      v-model="value3"
      :autoplay="setting.autoplay"
      :autoplay-speed="setting.autoplaySpeed"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow"
    >
      <CarouselItem>
        <div class="demo-carousel">1</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">2</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">3</div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">4</div>
      </CarouselItem>
    </Carousel>
    <!-- 父组件 -->
    <div>父组件的toCity{{toCity}}</div>
    <TrainCity @showCityname="updateCity" :sendData="toCity"></TrainCity>
  </div>
</template>
<script>
import TrainCity from "@/component/train-city";

export default {
  components: { TrainCity },
  data() {
    return {
      value3: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 5000,
        dots: "inside",
        radiusDot: false,
        trigger: "click",
        arrow: "hover"
      },
      toCity: "玉山"
    };
  },
  methods: {
    updateCity(data) { // 触发子组件城市选择-选择城市的事件
      this.toCity = data.cityname; // 改变了父组件的值
      console.log("toCity:" + this.toCity);
    }
  },
  mounted() {}
};
</script>
<style>
.demo-carousel {
  height: 160px;
  background-color: darkgray;
  line-height: 160px;
}
</style>

